<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import navbar from "@/components/navbar/navbar.vue";
import { computed, ref } from "vue";
import { calculateAge, router, toast } from "@/utils/tools";
import goodsWaterfallMy from "@/components/goods/goodsWaterfallMy.vue";
import productList from "@/components/productList/index.vue";
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import {
  apiGetUserInfo,
  apiMySelf,
  apiUserLabel,
  noReadNum,
} from "@/apis/user";
import { reactive } from "vue";
import { onShow, onPageScroll } from "@dcloudio/uni-app";
import customerPopup from "@/components/popup/CustomerPopup.vue";
import cache from "@/utils/cache";
import { getToken } from "@/utils/auth";
const userStore = useUserStore();
const cityProvinceStr = ref("北京市朝阳区");
const userInfo = reactive({});
const withdrawPopup = ref(false);
const validatePopup = ref(true);
const tagFlag = ref(0);
const navbarFixed = ref(false);
const userLabel = ref([]);
const isLogin = ref(true);
const showLoginRef = ref(false);
const userMySelf: any = reactive({});
const scrollTop = ref(0);
let searchText = ref("");
let searchTextCom = ref("");
const showBankRef = ref(false);
const listData = ref([]);
const noReadNumTip = ref(0);

const getNoReadNum = async () => {
  let res = await noReadNum();
  noReadNumTip.value = res.data;
};
const handleProduct = (e: any) => {
  // toast('选中了' + e)
  tagFlag.value = e;
};
const handleWithDraw = () => {
  // if (userMySelf.accountInfo.desirableAmount <= 0) {
  //   toast("无金额可提现");
  //   return;
  // }

  if (userStore.userInfo && !userStore.userInfo.carBlank) {
    // toast("请添加收款信息");
    showBankRef.value = true;
    return;
  }

  // /pageMy/collection-info/collection-info
  //   toast('提现成功！');
  // validatePopup.value.open(true);
  router(
    `/pagesMy/earnings/withdraw?residueMoney=${userMySelf.accountInfo.desirableAmount}`
  );
};
// 查看提现规则
const lookRule = () => {
  withdrawPopup.value.open("center");
};

const getMySelf = async () => {
  let res = await apiMySelf();
  Object.assign(userMySelf, res.data);
  if (res.data && res.data.labelType) {
    userLabel.value = res.data.labelType.split(",");
    // 保存到
  }
};

const getUserLabel = async () => {
  let res = await apiUserLabel();
  userLabel.value = res.data;
};
onLoad(async (e: any) => {
  uni.hideShareMenu()
  let token = getToken();
  if (null === token) {
    showLoginRef.value = true;
    isLogin.value = false;
  }

  //console.log("保存用户信息", userInfo);
  // 获取个性标签
  // getUserLabel();
});
onShow(async() => {
  uni.setStorageSync("currentIndex", null);
  uni.removeStorageSync("couponId");
  uni.removeStorageSync("couponMoney");
  uni.removeStorageSync("oldPrice");
  uni.removeStorageSync("oldDeposit");
  cityProvinceStr.value = cache.get("cityProvince");
  // 获取我的信息
  let { data, code } = await apiGetUserInfo();
  Object.assign(userInfo, data);
  // 保存用户信息
  userStore.setUserInfo(data);
  getNoReadNum();
  getMySelf();
});
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop;
});
// 计算年龄
const age = computed(() => {
  return userMySelf.carId ? calculateAge(userMySelf.carId) + "岁" : "--";
});
const sexImg = computed(() => {
  return userMySelf.sex == 0
    ? "@/static/images/sex1.png"
    : "@/static/images/sex2.png";
  // return calculateAge(userInfo.carId);
});
const headSculpture = computed(() => {
  return userMySelf.headSculpture == null || userMySelf.headSculpture == ""
    ? "@/static/images/avatar_default.png"
    : userMySelf.headSculpture;
});

// 跳转店铺会员
const storeClick = () => {
  // router(`/pagesMy/member/grade-member?&type=${'store'}`);
  router(`/pagesMy/store/openStore`);
};
const personalVip = () => {
  // router(`/pagesMy/member/grade-member`);
  router(`/pagesMy/member/vipPage`);
};
const openVip = (userMySelf: any) => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  //console.log(userMySelf, "openVip");
  // router(`/pagesMy/member/grade-member`);
  router(`/pagesMy/member/vipPage`);
};
const inputChange = (e: any) => {
  searchTextCom.value = searchText.value;
};

// 我买的
const myBuy = (id: any) => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesOrder/order/order?scene=buy&index=${id}`,
  });
};
// 我卖的

const mySell = (id: any) => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesOrder/order/order?scene=sell&index=${id}`,
  });
};
// 个人信息
const setClick = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesMy/user/user`,
  });
};
const openkf = () => {
  uni.openCustomerServiceChat({
    extInfo: {
      url: "https://work.weixin.qq.com/kfid/kfcb30cf7f0223d37c9",
    },
    corpId: "wwa11c6a9d37061a7d",
    success(res) {
      //console.log(res);
    },
    fail(res) {
      //console.log('出错',res);
    },
  });
};
const handleLogin = () => {
  showLoginRef.value = false;
  isLogin.value = true;
  router(`/pages/login/login`);
};
// 跳转消息
const messageClick = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesIndex/message/message`,
  });
};
const goAdress = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesMy/address/list`,
  });
};
const goCollection = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesMy/collection-info/collection-info`,
  });
};
const shopClick = () => {
  uni.navigateTo({
    url: `/pagesMy/store/openStore`,
  });
};
const locationPage = () => {
  uni.navigateTo({
    url: `/pagesIndex/location/location`,
  });
};
// 奇石认证
const certificationClick = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesMerchand/auth-list`,
  });
}
// 打开分享
onShareAppMessage((e: any) => {
  //console.log("----分享----", e);
  return {
    title: "",
    path: `/pages/my/my?inviterId=${userStore.userInfo.id}`,
  };
});
//分享到朋友圈
onShareTimeline((e: any) => {
  return {
    title: "",
    path: `/pages/my/my?inviterId=${userStore.userInfo.id}`,
  };
});
</script>

<template>
  <navbar title="我的" :fixed="navbarFixed" />
  <view class="container">
    <view class="user">
      <view class="header-info flex-align-center">
        <view class="head">
          <image :src="headSculpture" class="head-avatar" />
        </view>
        <view class="head-center"></view>
        <view class="right flex flex-between">
          <view>
            <view class="nologin-title">
              <view>
                <text v-if="userStore.userInfo == undefined" class="text-xl" @click="router(`/pages/login/login`)">立即登录
                  >
                </text>
                <text class="text-xl" v-else>{{
                  userStore.userInfo.userName
                }}</text>
              </view>
              <view class="vip-lv" v-if="userMySelf.shopVip !== 0" @tap="openVip(userMySelf)">
                <view class="lvicon">
                  <image src="@/static/images/viplv@2x.png"></image>
                </view>
                <view class="viplvtext">
                  <!-- <view v-if="userMySelf.shopVip === 0">LV0</view> -->
                  <!-- LV{{userMySelf.shopVip?userMySelf.shopVip:'0'}} -->
                  <view>
                    <text>LV{{ userMySelf.shopVip }}</text>
                    <!-- @tap="personalVip" -->
                    <text v-if="userMySelf.vipType === 0">个人</text>
                    <!-- @tap="storeClick" -->
                    <text v-if="userMySelf.vipType === 1">店铺</text>
                  </view>
                </view>
              </view>
              <!-- <uv-text color="#fff" :lines="1" :text="userStore.userInfo.userName"></uv-text> -->
            </view>
            <view class="store-center"></view>
            <view class="store flex flex-align-center">
              <!-- <image src="@/static/images/store.png" /> -->
              <!-- {{ userMySelf.shopName ? userMySelf.shopName : "--" }} -->
              <view class="map-fills">
                <uv-icon name="map-fill" color="#fff"></uv-icon>
                <view class="map-fills-text">
                  <!-- {{ cityProvinceStr ? cityProvinceStr : "定位当前地址" }} -->
                  {{ userMySelf.address ? userMySelf.address : "去设置定位当前地址" }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="userinfo-feature flex">
          <!-- <view class="feature flex flex-center" @click="openkf">
            <image src="@/static/images/support.png" />
          </view> -->
          <view class="feature flex flex-center">
            <image src="@/static/images/settings.png" @tap="setClick()" />
          </view>
          <view class="feature flex flex-center" style="position: relative" @tap="messageClick()">
            <view class="box">
              <uv-badge numberType="overflow" type="error" max="9" :value="noReadNumTip"></uv-badge>
            </view>
            <image src="@/static/images/ldang.png" />
          </view>
        </view>
      </view>
      <!-- <view class="avatar">

                <image :src="headSculpture" />
            </view>
            <view class="user-right">
                <view class="user-info">
                    <view class="nikename">
                        <text>Hello,{{ userMySelf.userName }}</text>
                    </view>

                </view>
                <view class="store flex flex-align-center">
                    <image src="@/static/images/store.png" />
                    {{ userMySelf.shopName }}
                </view>
            </view> -->
    </view>
    <view class="ktvip" v-if="userMySelf.shopVip == 0" @tap="openVip">
      <view class="atv-member">
        <image src="https://leshi-oss.oss-cn-qingdao.aliyuncs.com/b045f342-d8c1-4c10-9e6e-e2d0a022c8b5.png" />
      </view>
      <view class="atv-memberbtn">
        去开通
        <!-- <view v-if="userMySelf.shopVip == 0" @tap="openVip">去开通</view> -->
        <!-- <view v-if="userMySelf.shopVip != 0">
          <text>lv{{ userMySelf.shopVip }}</text>
          <text v-if="userMySelf.vipType === 0" @tap="personalVip">个人会员</text>
          <text v-if="userMySelf.vipType === 1" @tap="storeClick">店铺会员</text>
        </view> -->
      </view>
    </view>
    <view class="withdrawal">
      <view class="withdrawal-info">
        <view class="withdrawal-text">
          <view class="withdrawal-num">{{
            userMySelf.accountInfo?.transactionAmount
          }}</view>
          <view class="withdrawal-dp">交易总额</view>
        </view>
        <view class="withdrawal-text">
          <view class="withdrawal-num">{{
            userMySelf.accountInfo?.accessAmount
          }}</view>
          <view class="withdrawal-dp">店铺押金</view>
        </view>
        <view class="withdrawal-text">
          <view class="withdrawal-num">{{
            userMySelf.accountInfo?.seizureAmount
          }}</view>
          <view class="withdrawal-dp">平台代收</view>
        </view>
        <view class="withdrawal-text">
          <view class="withdrawal-num">{{
            userMySelf.accountInfo?.desirableAmount
          }}</view>
          <view class="withdrawal-dp">可提金额</view>
        </view>
      </view>
      <view class="withdrawal-tx" @click="handleWithDraw">提现</view>
    </view>
    <view class="order-wrap">
      <view class="order-status">
        <view class="order-text">
          <view>
            <navigator url="/pagesMy/focus/focus" open-type="navigate" hover-class="navigator-hover">
              <text>我的关注</text>
            </navigator>
          </view>
          <view class="order-number">
            <navigator url="/pagesMy/focus/focus" open-type="navigate" hover-class="navigator-hover">
              <text>{{ userMySelf.follow ? userMySelf.follow : "0" }}</text>
            </navigator>
          </view>
        </view>
        <view class="order-text">
          <view>
            <navigator url="/pagesMy/fans/fans" open-type="navigate" hover-class="navigator-hover">
              <text>我的粉丝</text>
            </navigator>
          </view>
          <view class="order-number">
            <navigator url="/pagesMy/fans/fans" open-type="navigate" hover-class="navigator-hover">
              <text class="">{{
                userMySelf.fans ? userMySelf.fans : "0"
              }}</text>
            </navigator>
          </view>
        </view>
        <view class="order-text">
          <view>
            <navigator url="/pagesMy/coupon/index" open-type="navigate" hover-class="navigator-hover">
              <text>我的优惠券</text>
            </navigator>
          </view>
          <view class="order-number">
            <navigator url="/pagesMy/coupon/index" open-type="navigate" hover-class="navigator-hover">
              <text class="">{{
                userMySelf.preferential ? userMySelf.preferential : "0"
              }}</text>
            </navigator>
          </view>
        </view>
        <view class="order-text">
          <view>
            <navigator url="/pagesIndex/collectMy/index" open-type="navigate" hover-class="navigator-hover">
              <text>我的收藏</text>
            </navigator>
          </view>
          <view class="order-number">
            <navigator url="/pagesIndex/collectMy/index" open-type="navigate" hover-class="navigator-hover">
              <text>{{ userMySelf.collect ? userMySelf.collect : "0" }}</text>
            </navigator>
          </view>
        </view>
      </view>
      <view class="order-my">我买的</view>
      <view class="order-product">
        <view class="order-product-item" @tap="myBuy(1)">
          <view class="box-order">
            <uv-badge numberType="overflow" type="error" max="9" shape="horn"
              :value="userMySelf.buyInfo?.waitNum"></uv-badge>
          </view>
          <view class="order-img">
            <image src="@/static/images/dfh@2x.png" />
          </view>
          <view class="order-text">待发货</view>
        </view>
        <view class="order-product-item" @tap="myBuy(2)">
          <view class="box-order">
            <uv-badge numberType="overflow" type="error" max="9" shape="horn"
              :value="userMySelf.buyInfo?.sendNum"></uv-badge>
          </view>
          <view class="order-img">
            <image src="@/static/images/dsh@2x.png" />
          </view>
          <view class="order-text">待收货</view>
        </view>
        <view class="order-product-item" @tap="myBuy(3)">
          <view class="box-order">
            <uv-badge numberType="overflow" type="error" max="9" shape="horn"
              :value="userMySelf.buyInfo?.completeNum"></uv-badge>
          </view>
          <view class="order-img">
            <image src="@/static/images/ywc@2x.png" />
          </view>
          <view class="order-text">已完成</view>
        </view>
        <view class="order-product-item" @tap="myBuy(4)">
          <view class="box-order">
            <uv-badge numberType="overflow" type="error" max="9" shape="horn"
              :value="userMySelf.buyInfo?.refundNum"></uv-badge>
          </view>
          <view class="order-img">
            <image src="@/static/images/th@2x.png" />
          </view>
          <view class="order-text">退货/售后</view>
        </view>
        <view class="order-product-item lftline" @tap="myBuy(0)">
          <view class="order-img">
            <image src="@/static/images/alldd@2x.png" />
          </view>
          <view class="order-text">全部订单</view>
        </view>
      </view>
    </view>
    <!-- 我卖的 -->
    <view class="order-wrap">
      <view class="order-my">我卖的</view>
      <view class="order-product">
        <view class="order-product-item" @tap="mySell(1)">
          <view class="box-order">
            <uv-badge numberType="overflow" type="error" max="9" shape="horn"
              :value="userMySelf.sellInfo?.waitNum"></uv-badge>
          </view>
          <view class="order-img">
            <image src="@/static/images/dfh@2x.png" />
          </view>
          <view class="order-text">待发货</view>
        </view>
        <view class="order-product-item" @tap="mySell(2)">
          <view class="box-order">
            <uv-badge numberType="overflow" type="error" max="9" shape="horn"
              :value="userMySelf.sellInfo?.sendNum"></uv-badge>
          </view>
          <view class="order-img">
            <image src="@/static/images/dsh@2x.png" />
          </view>
          <view class="order-text">待收货</view>
        </view>
        <view class="order-product-item" @tap="mySell(3)">
          <view class="box-order">
            <uv-badge numberType="overflow" type="error" max="9" shape="horn"
              :value="userMySelf.sellInfo?.completeNum"></uv-badge>
          </view>
          <view class="order-img">
            <image src="@/static/images/ywc@2x.png" />
          </view>
          <view class="order-text">已完成</view>
        </view>
        <view class="order-product-item" @tap="mySell(4)">
          <view class="box-order">
            <uv-badge numberType="overflow" type="error" max="9" shape="horn"
              :value="userMySelf.sellInfo?.refundNum"></uv-badge>
          </view>
          <view class="order-img">
            <image src="@/static/images/th@2x.png" />
          </view>
          <view class="order-text">退货/售后</view>
        </view>
        <view class="order-product-item lftline" @tap="mySell(0)">
          <view class="order-img">
            <image src="@/static/images/alldd@2x.png" />
          </view>
          <view class="order-text">全部订单</view>
        </view>
      </view>
    </view>
    <!-- 我卖的end -->
    <!-- 其他 -->
    <view class="order-wrap">
      <view class="order-my">其他</view>
      <view class="order-product">
        <view class="order-product-item" @click="openkf">
          <view class="order-img">
            <image src="@/static/images/kefu.png" />
          </view>
          <view class="order-text">客服服务</view>
        </view>
        <view class="order-product-item" @click="certificationClick">
          <view class="order-img">
            <image src="@/static/images/qishirenzhengqqq.png" />
          </view>
          <view class="order-text">奇石认证</view>
        </view>
        <!-- <view class="order-product-item" @click="shopClick">
          <view class="order-img">
            <image src="@/static/images/shanghu.png" />
          </view>
          <view class="order-text">商户信息</view>
        </view> -->
        <view class="order-product-item" @click="goAdress">
          <view class="order-img">
            <image src="@/static/images/shouhuodizhi.png" />
          </view>
          <view class="order-text">收货地址</view>
        </view>
        <view class="order-product-item" @click="goCollection">
          <view class="order-img">
            <image src="@/static/images/shoukuan.png" />
          </view>
          <view class="order-text">收款信息</view>
        </view>
      </view>
    </view>
    <!-- 其他end -->
    <view class="main">
      <!-- <view class="main-top">
        <view class="feature">
          <navigator
            url="/pagesMy/focus/focus"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <text class="number">{{
              userMySelf.follow ? userMySelf.follow : "0"
            }}</text>
            <text>关注</text>
          </navigator>
        </view>
        <view class="feature">
          <navigator
            url="/pagesMy/fans/fans"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <text class="number">{{
              userMySelf.fans ? userMySelf.fans : "0"
            }}</text>
            <text>粉丝</text>
          </navigator>
        </view>
        <view class="feature"  v-if="userMySelf.shopVip !=0">
          <text class="wordart">lv{{ userMySelf.shopVip }}</text>
          <text v-if="userMySelf.vipType === 0" @tap="personalVip">个人会员</text>
          <text v-if="userMySelf.vipType === 1" @tap="storeClick">店铺会员</text>
        </view>
        <view class="feature"  v-if="userMySelf.shopVip == 0" @tap="openVip">
          <text>开通会员</text>
        </view>
      </view>
      <view class="signature">
        <text>个性签名：</text>
        <text>{{
          userMySelf.personalProfile ? userMySelf.personalProfile : "--"
        }}</text>
      </view>
      <view class="tags" style="display: flex;">
        <view class="tag" v-if="userMySelf.address">
          <text>{{ userMySelf.address ? userMySelf.address : "--" }}</text>
        </view>
      </view> -->
      <!-- <view class="tags">
        <view
          class="tag"
          v-if="userLabel.length > 0"
          v-for="item in userLabel"
          :key="item.id"
        >
          <text>{{ item }}</text>
        </view>
        <view v-else class="tag"> --</view>
      </view> -->
      <!-- <uv-line
        dashed
        :customStyle="{ margin: '32rpx 0 30rpx' }"
        v-if="isLogin"
      ></uv-line> -->
      <!-- <view class="my-earnings flex flex-column" v-if="isLogin">
        <view class="header flex flex-between">
          <view>我的收益</view>
          <view class="live-help flex flex-center" @click="lookRule">
            <image
              class="margin-right-10"
              src="@/static/images/live_help.png"
            />
            <text>提现规则</text>
          </view>
        </view>
        <view class="earnings flex flex-between" v-if="userMySelf">
          <view class="flex flex-column">
            <view class="flex flex-align-center"
              ><text class="money">{{ userMySelf.sellMoney }}</text>
              <text class="yuan">元</text>
            </view>
            <text class="title">平台交易总收益</text>
          </view>
          <view class="flex flex-column">
            <view class="flex flex-center"
              ><text class="money">{{ userMySelf.withdrawalMoney }}</text>
              <text class="yuan">元</text>
            </view>
            <text class="title">已提现金额</text>
          </view>
        </view>

        <view class="withdraw flex flex-center flex-column">
          <button class="btn flex flex-align-center" @click="handleWithDraw">
            提现
          </button>
          <view class="tips"
            >剩余可提现金额:
            <text class="money"> {{ userMySelf.residueMoney }}</text> 元</view
          >
        </view>
      </view> -->
      <!-- <uv-line dashed :customStyle="{ margin: '20rpx 0' }"></uv-line> -->
      <!-- <view class="sell">
        <view class="sell-title">
          <view>订单管理</view>
          <view class="look" @tap="myBuy()">查看 ></view>
        </view>
        <view class="my-sell">
          <view class="sell-operate" @tap="myBuy()">
            <image class="" src="@/static/images/buy.png" />
            <text style="top: 45%">我买的({{ userMySelf.purchaseNum }})</text>
          </view>
          <view class="sell-operate" @tap="mySell">
            <image
              class=""
              src="@/static/images/sell.png"
              style="height: 100rpx"
            />
            <text style="top: 34%">我卖的({{ userMySelf.sellNum }})</text>
          </view>
        </view>
      </view> -->
      <!-- <uv-line dashed :customStyle="{ margin: '20rpx 0' }"></uv-line> -->

      <view class="product-list" v-if="isLogin">
        <view class="product-tags-wrapper">
          <view class="product-tags">
            <text :class="'product-tag ' + (tagFlag == 0 ? 'product-tag-selected' : '')
              " @click="handleProduct(0)">全部</text>
            <text :class="'product-tag ' + (tagFlag == 2 ? 'product-tag-selected' : '')
              " @click="handleProduct(2)">在售</text>
            <text :class="'product-tag ' + (tagFlag == 1 ? 'product-tag-selected' : '')
              " @click="handleProduct(1)">认证</text>
            <text :class="'product-tag ' + (tagFlag == 3 ? 'product-tag-selected' : '')
              " @click="handleProduct(3)">已售</text>
            <text :class="'product-tag ' + (tagFlag == 4 ? 'product-tag-selected' : '')
              " @click="handleProduct(4)">下架</text>
              <text :class="'product-tag ' + (tagFlag == 6 ? 'product-tag-selected' : '')
              " @click="handleProduct(6)">推荐</text>
              <text :class="'product-tag ' + (tagFlag == 7 ? 'product-tag-selected' : '')
              " @click="handleProduct(7)">珍宝档案</text>
          </view>
        </view>
        <!-- <view class="product-search">
          <view class="search-icon-2">
            <uv-icon
              name="search"
              color="#C33E29"
              width="100rpx"
              height="100rpx"
            />
          </view>
          <input
            type="text"
            placeholder="请输入您想要搜索的奇石"
            v-model="searchText"
          />
          <view class="search-icon">
            <text class="divide">|</text>
            <image src=" @/static/images/search_one.png" @tap="inputChange" />
          </view>
        </view> -->
      </view>
      <view v-else class="islogin flex flex-column justify-center align-center">
        <image src="https://fuyue-test-oss.oss-cn-shanghai.aliyuncs.com/3c221b9c-7aa1-4e45-9d73-7d4f24c4459c.png"
          mode="scaleToFill" />
        <view>无法查看数据，请
          <text class="login" @click="handleLogin">登录</text>
          后查看~
        </view>
      </view>
    </view>
    <view class="goods-box" v-if="isLogin">
      <goodsWaterfallMy :tagFlag="tagFlag" :searchText="searchTextCom" />
      <!-- <productList :listData="listData"></productList> -->
    </view>

    <!-- 提现规则弹出 -->
    <uv-popup ref="withdrawPopup" closeable="true" :customStyle="{ width: '650rpx', height: 'auto' }" zoom="true"
      round="10" @change="change">
      <view class="rule">
        <view class="head flex flex-center">
          <view class="line1"></view>
          <text class="title"> 提现规则 </text>
          <view class="line2"></view>
        </view>
        <view class="content flex flex-column">
          <text>
            1、用户可选择将平台收益提现至个人信息-收款信息中绑定的银行卡。</text>

          <text> 2、提现申请提交后，将在1-3个工作日内完成审核和处理。 </text>
          <text>
            3、提现佣金：提现时平台将收取5%的提现佣金（到账金额=提现金额-佣金金额）。
          </text>
        </view>
      </view>
    </uv-popup>

    <!-- 提现收款信息检测绑定弹出 -->
    <uv-popup ref="validatePopup" closeable="true" :customStyle="{ width: '650rpx', height: 'auto' }" zoom="true"
      round="10" @change="change">
      <view class="validate">
        <view class="icon flex flex-center">
          <view class="icon2 flex flex-center">
            <image src="@/static/images/alarm-warning-line.png" mode="scaleToFill" />
          </view>
        </view>
        <view class="title"> 未绑定收款信息 </view>
        <view class="content">尊敬的用户，您好，请先绑定收款信息再发起提现。</view>
      </view>
    </uv-popup>
    <uv-overlay zIndex="1999" :show="showLoginRef" zoom="true" round="10" @change="change" class="overlay">
      <view class="validate">
        <view class="flex justify-between">
          <view class="icon flex flex-center">
            <view class="icon2 flex flex-center">
              <image src="@/static/images/alarm-warning-line.png" mode="scaleToFill" />
            </view>
          </view>
          <view class="icons-close" @click="showLoginRef = false">
            <image src="@/static/images/icons-close.png" mode="scaleToFill" />
          </view>
        </view>
        <view class="title"> 登录提醒 </view>
        <view class="content">该功能需要您的用户信息方能正常使用，请先完成登录~
        </view>
        <view class="flex justify-around btn-group">
          <button class="btn-cancel" @click="showLoginRef = false">取消</button>
          <button class="btn-open" @click="handleLogin">立即登录</button>
        </view>
      </view>
    </uv-overlay>
    <view class="wrap" ref="backTop">
      <uv-back-top :scroll-top="scrollTop"></uv-back-top>
    </view>
  </view>

  <uv-overlay zIndex="1999" :show="showBankRef" zoom="true" round="10" @change="change" class="overlay">
    <view class="validate">
      <view class="flex justify-between">
        <view class="icon flex flex-center">
          <view class="icon2 flex flex-center">
            <image src="@/static/images/alarm-warning-line.png" mode="scaleToFill" />
          </view>
        </view>
        <view class="icons-close" @click="showBankRef = false">
          <image src="@/static/images/icons-close.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="title"> 未添加收款信息提醒 </view>
      <view class="content"> </view>
      <view class="flex justify-around btn-group">
        <button class="btn-cancel" @click="showBankRef = false">取消</button>
        <button class="btn-open" @click="router(`/pagesMy/collection-info/collection-info`)">
          添加收款信息
        </button>
      </view>
    </view>
  </uv-overlay>
</template>

<style lang="scss" scoped>
::v-deep .uv-navbar__content__left {
  display: none !important;
}

.validate {
  padding: 40rpx;
  position: absolute;
  border-radius: 20rpx;
  width: 626rpx;
  height: 500rpx;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffffff;

  .icons-close {
    width: 50rpx;
    height: 50rpx;
  }

  .btn-group {
    margin-top: 40rpx;

    .btn-cancel {
      border-radius: 8px;
      border: 1px solid rgba(154, 154, 154);
      font-size: 14px;
      width: 250rpx;
      color: #4f4f4f;
      height: 80rpx;
    }

    .btn-open {
      border-radius: 8px;
      background: linear-gradient(0deg, #bf0103, #ff5402);

      color: #ffffff;
      border: 0px solid #bbbbbb;
      font-size: 14px;
      width: 250rpx;
      height: 80rpx;
    }
  }

  .icon {
    margin-bottom: 20rpx;
    width: 114rpx;
    height: 114rpx;
    border-radius: 50%;
    background-color: #fef3f2;

    .icon2 {
      width: 81rpx;
      height: 81rpx;
      border-radius: 50%;
      background-color: #fee4e2;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
  }

  .content {
    color: #6c6c6c;
    font-size: 28rpx;
  }
}

.islogin {
  font-size: 28rpx;
  margin-top: 100rpx;
  height: 100%;

  image {
    width: 300rpx;
    height: 300rpx;
  }

  .login {
    color: #c33e29;
  }
}

.container {
  padding: 40rpx 0 0 0;
  // background: url("https://www.stoneplayer.com/background/underlay.jpg") no-repeat;
  background: url("https://leshi-oss.oss-cn-qingdao.aliyuncs.com/a5207c43-a7ac-4457-a04f-4df4dc973c9e.png") no-repeat;
  background-size: 100% 310px;

  .user {
    font-size: 28rpx;
    color: #ffffff;
    padding: 0 20rpx 20rpx 20rpx;
    width: 100%;
    height: 100%;
    // background-color: aliceblue;
    display: flex;
    align-items: flex-start;
    // padding: 0 30rpx 20rpx;

    .header-info {
      position: relative;

      display: flex;
      flex-direction: row;
      width: 100%;
      height: 128rpx;

      .head-center {
        width: 20rpx;
        height: 100%;
      }

      .head {
        background-color: #ffffff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 128rpx;
        height: 128rpx;
        box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.1);

        .head-avatar {
          border-radius: 50%;
          width: 100%;
          height: 100%;

          // object-fit: cover;
        }
      }

      .right {
        .store-center {
          height: 20rpx;
          width: 100%;
        }

        .store {

          // width: 100%;
          // height: 100%;
          image {
            width: 27rpx;
            height: 27rpx;
          }
        }
      }

      .userinfo-feature {
        top: 0;
        right: 0;
        position: absolute;

        .userinfo-feature-center {
          width: 20rpx;
        }

        .feature {
          border-radius: 10px;

          width: 66rpx;
          height: 66rpx;
          // background-color: rgba(255, 255, 255, 0.5);
        }

        image {
          width: 42rpx;
          height: 42rpx;
        }
      }
    }
  }

  .main {
    box-sizing: border-box;
    // background-color: #ffffff;
    width: 100%;
    height: 100%;
    padding: 30rpx;
    border-radius: 24rpx;

    .main-top {
      // padding: 20rpx;
      width: 100%;
      font-size: 28rpx;
      display: flex;
      justify-content: space-around;

      text {
        margin-right: 10rpx;
      }

      .feature {
        // width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // justify-content: space-around;
        color: #bebebe;
      }

      .number {
        font-size: 32rpx;
        font-weight: 700;
        color: #000000;
      }

      .wordart {
        font-size: 36rpx;
        font-weight: 700;
        color: #328cfe;
        font-style: italic;
        text-shadow: 1px 2px 1px #3cddc9;
        mix-blend-mode: multiply;
      }
    }

    .my-earnings {
      .header {
        width: 100%;
        margin: 10rpx 0;
      }

      .live-help {
        border-radius: 40rpx;
        padding: 10rpx 15rpx;
        border: 2px solid #efefef;

        text {
          color: #b54730;
          font-size: 24rpx;
        }

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .earnings {
        .money {
          font-size: 56rpx;
          font-weight: 600;
        }

        .yuan {
          display: block;
          margin-top: 20rpx;
          color: #101010;
          font-size: 24rpx;
          margin-left: 10rpx;
        }

        .title {
          color: #9a9a9a;
          font-size: 24rpx;
          margin: 10rpx 0 40rpx;
        }
      }

      .withdraw {
        margin: 20rpx;

        .btn {
          border: 1px solid #b54730;
          border-radius: 50rpx;
          width: 500rpx;
          height: 80rpx;
          margin: 0 auto;
          color: #b54730;
        }

        .tips {
          color: #9a9a9a;
          font-size: 24rpx;
          margin: 10rpx 0;
        }

        .money {
          color: #b54730;
        }
      }
    }

    .signature {
      display: flex;
      font-size: 25rpx;
      margin: 24rpx 0 26rpx;
      color: #9a9a9a;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;

      // margin: 10rpx 0;
      width: 100%;

      .tag {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5rpx;
        width: auto;
        margin-right: 20rpx;
        margin: 2px 2px;
        padding: 5rpx 10rpx;
        color: rgba(154, 154, 154, 1);
        font-size: 24rpx;
        // justify-content: center;
        // align-items: center;
      }

      image {
        width: 25rpx;
        height: 25rpx;
        margin-bottom: rpx;
      }
    }

    .sell {
      display: flex;
      flex-direction: column;

      .sell-title {
        color: #101010;
        margin: 20rpx 0;
        font-size: 32rpx;
        font-weight: 600;
        display: flex;
        justify-content: space-between;

        .look {
          color: #9a9a9a;
          font-weight: none;

          font-size: 24rpx;
        }
      }

      image {
        width: 320rpx;
        height: 82rpx;
      }

      .my-sell {
        display: flex;
        justify-content: space-around;

        .sell-operate {
          position: relative;
          height: 100%;

          text {
            color: #ffffff;
            font-size: 32rpx;
            position: absolute;

            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }

    .product-list {
      .product-tags-wrapper {
        width: 100%;
        overflow-x: scroll;
      }

      .product-tags {
        width: 852rpx;
        // display: flex;
        // justify-content: space-between;
        // padding: 20rpx;

        // .product-tag:nth-child(1) {
        //   margin-left: 0;
        // }
        .product-tag {
          float: left;
          font-size: 28rpx;
          color: #333333;
          display: flex;
          justify-content: center;
          align-items: center;
          // width: 122rpx;
          padding: 0 20rpx;
          height: 64rpx;
          background: #f5f5f5;
          // border-radius: 12rpx;
          border-radius: 40rpx;
          margin-left: 20rpx;
        }

        .product-tag-selected {
          // background: linear-gradient(
          //   0deg,
          //   rgba(191, 1, 3, 1),
          //   rgba(255, 84, 2, 1)
          // );
          background: #c7452f;
          color: #ffffff;
          border-radius: 50rpx;
        }
      }

      .product-search {
        overflow-x: hidden;
        position: relative;
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
        border: 0px solid rgba(187, 187, 187, 1);

        position: relative;
        margin-top: 20rpx;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);

        input {
          flex: 0.8;
          padding-left: 60rpx;
        }

        .search-icon-2 {
          padding-left: 10rpx;
          position: absolute;
          transform: translate(0, -50%);
          top: 50%;
        }

        .search-icon {
          right: 20rpx;
          position: absolute;
          display: flex;
          align-items: center;

          .divide {
            margin-right: 20rpx;
            color: #cecece;
          }

          image {
            // padding: 0 20rpx 0 20rpx;
            width: 43rpx;
            height: 43rpx;
            // margin-right: 20rpx;
          }
        }
      }
    }
  }
}

.goods-box {
  padding: 0 30rpx;
}

.rule {
  padding: 30rpx;
}

.head {
  color: #d92d20;
  font-weight: 600;
  // margin: 30rpx;

  .line1 {
    // margin-bottom: 30px;
    width: 0;
    height: 0;
    border: 2px solid transparent;
    border-right: 150rpx solid #e73503;
    // background: linear-gradient(0deg, rgba(191, 1, 3, 1) 0%, rgba(255, 84, 2, 1) 99.2%);
    // border-radius: 5px;
  }

  .line2 {
    // margin-bottom: 30px;
    width: 0;
    height: 0;
    border: 2px solid transparent;
    border-left: 150rpx solid #e73503;
    // background: linear-gradient(0deg, rgba(191, 1, 3, 1) 0%, rgba(255, 84, 2, 1) 99.2%);
    // border-radius: 5px;
  }

  .title {
    margin: 0 20rpx;
  }
}

.content {
  font-size: 28rpx;
}

.validate {
  padding: 40rpx;

  .icon {
    margin-bottom: 20rpx;
    width: 114rpx;
    height: 114rpx;
    border-radius: 50%;
    background-color: #fef3f2;

    .icon2 {
      width: 81rpx;
      height: 81rpx;
      border-radius: 50%;
      background-color: #fee4e2;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
  }

  .content {
    color: #6c6c6c;
    font-size: 28rpx;
  }
}

.text-xl {
  font-weight: 500;
  font-size: 40rpx;
  color: #ffffff;
}

.map-fills {
  font-weight: 400;
  font-size: 24rpx;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.map-fills-text {
  margin-left: 10rpx;
}

.vip-lv {
  // width: 116rpx;
  padding: 0 20rpx 0 8rpx;
  height: 40rpx;
  background: url("@/static/images/vipbg@2x.png") no-repeat center;
  background-size: cover;
  margin-left: 18rpx;
  display: flex;
  align-items: center;
  border-radius: 0rpx 6rpx 6rpx 16rpx;

  .lvicon {
    width: 34rpx;
    height: 34rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .viplvtext {
    font-size: 24rpx;
    color: #941c0d;
    font-weight: bold;
    margin-left: 10rpx;
  }
}

.nologin-title {
  display: flex;
  align-items: center;
}

.ktvip {
  height: 110rpx;
  // background: url('@/static/images/ktbg@2x.png') no-repeat center;
  background: url("https://leshi-oss.oss-cn-qingdao.aliyuncs.com/e4cf1f4f-b464-4bb1-b05e-a9ecd6be7020.png") no-repeat center;
  background-size: cover;
  margin: 44rpx 20rpx 20rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;

  .atv-member {
    width: 200rpx;
    height: 50rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .atv-memberbtn {
    // width: 142rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: linear-gradient(90deg, #fee8c5 0%, #ce9454 100%);
    border-radius: 34rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #42200a;
    text-align: center;
    padding: 0 35rpx;
  }
}

.withdrawal {
  padding: 40rpx 30rpx;
  background: linear-gradient(180deg, #ffedea 0%, #ffffff 100%);
  border-radius: 20rpx;
  border: 2rpx solid #ffffff;
  margin: 24rpx 20rpx 24rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.withdrawal-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 40rpx;
}

.withdrawal-text {
  flex: 1;
  border-right: 1rpx solid #cdcccc;
  text-align: center;
}

.withdrawal-text:last-child {
  border-right: none;
}

.withdrawal-tx {
  padding: 18rpx 30rpx;
  background: #c7452f;
  box-shadow: 0rpx 4rpx 15rpx 0rpx #ffa596;
  border-radius: 50rpx;
  text-align: center;
  font-weight: 400;
  font-size: 24rpx;
  color: #ffffff;
}

.withdrawal-num {
  font-weight: bold;
  font-size: 28rpx;
  color: #222222;
}

.withdrawal-dp {
  font-weight: 400;
  font-size: 22rpx;
  color: #333333;
}

.order-wrap {
  margin: 24rpx 20rpx 24rpx 20rpx;
  // height: 326rpx;
  padding-bottom: 40rpx;
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;

  .order-status {
    background: #fafafa;
    padding: 29rpx 53rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .order-text {
      display: flex;
      font-weight: bold;
      font-size: 22rpx;
      color: #000000;

      .order-number {
        margin-left: 12rpx;
      }
    }
  }

  .order-my {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
    margin: 37rpx 30rpx;
  }

  .order-product {
    display: flex;

    .order-product-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      position: relative;

      .order-img {
        width: 54rpx;
        height: 54rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .order-text {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        margin-top: 16rpx;
      }
    }
  }
}

.box {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.box-order {
  position: absolute;
  top: -16rpx;
  right: 20rpx;
  z-index: 1;
}

.lftline {
  border-left: 6rpx solid #ececec;
}
</style>
